<script setup lang="ts">
  import usePostingMsgPushNodeListService from '@/services/pages/base-info/usePostingMsgPushNodeListService'
  import FormModal from './form-modal.vue'
  import { PropType, ref } from 'vue'

  const { msgPushNodeList, getMsgPushNodeListLoading, getMsgPushNodeList } =
    usePostingMsgPushNodeListService()

  defineOptions({
    name: 'PostingMsgPushPostingNodeListComponent',
  })

  const props = defineProps({
    type: {
      type: String as PropType<'sparePartApply' | 'repair'>,
      required: true,
    },
  })

  const formModalVisible = ref(false)
  const currentOperateNode = ref<BaseInfoAPIResponse.PostingMsgPushNodeListItem>({
    id: '',
    type: 1,
    name: '',
    node: 0,
    nodeName: '',
    personnelVoList: [],
  })

  const handleUpdateClick = (row: BaseInfoAPIResponse.PostingMsgPushNodeListItem) => {
    currentOperateNode.value = row
    formModalVisible.value = true
  }

  const getList = () => {
    getMsgPushNodeList(props.type)
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div v-loading="getMsgPushNodeListLoading" class="msg-push-node-list-component">
    <el-table :data="msgPushNodeList" :border="true" :stripe="true" :max-height="500">
      <!-- 序号 -->
      <el-table-column type="index" width="50" :align="'center'" label="序号" />

      <!-- 单据名称 -->
      <el-table-column prop="name" min-width="100" label="单据名称" />

      <!-- 操作节点 -->
      <el-table-column prop="nodeName" width="140" label="操作节点" />

      <!-- 通知人员（OA） -->
      <el-table-column width="320" label="通知人员（OA）" show-overflow-tooltip>
        <template #default="{ row }">
          {{
            (
              row.personnelVoList as BaseInfoAPIResponse.PostingMsgPushNodeListItem['personnelVoList']
            )
              .map((item) => item.name)
              .join('、')
          }}
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column v-slot="{ row }" width="50" label="操作">
        <h-link @click="handleUpdateClick(row)">修改</h-link>
      </el-table-column>
    </el-table>

    <form-modal v-model="formModalVisible" :msg-push-node="currentOperateNode" @update="getList" />
  </div>
</template>

<style scoped lang="scss">
  .msg-push-node-list-component {
    width: 100%;
    height: 100%;
  }
</style>
